<template>
	<view class="content">
		<!-- 轮播图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item>
					<view class="swiper-item">
						<image src="https://dogji.vip/cloud/image/swiper/swiperList1.png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="https://dogji.vip/cloud/image/swiper/swiperList2.png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="https://dogji.vip/cloud/image/swiper/swiperList3.png" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 按钮选项 -->
		<view class="btn">
			<button class="button-cicle" type="primary" @click="findBoy"
				style="font-size: 13px; margin-left: 10%; background:linear-gradient(to right, #ff5a4b,#d175ff);">
				<image src="../../static/img/male.png"
					style="width: 12px;height: 12px; margin-top: 8px; margin-right: 3rpx; margin-left: -14rpx;" />男嘉宾
			</button>
			<button class="button-cicle" type="primary" @click="findGirl" style="font-size: 13px; margin-left: 10%;">
				<image src="../../static/img/female.png"
					style="width: 12px;height: 12px; margin-top: 8px; margin-right: 3rpx; margin-left: -14rpx;" />女嘉宾
			</button>
			<view>
				<u-picker :show="show" ref="uPicker" :columns="columns" @cancel="cancel" @confirm="confirm"
					@change="changeHandler" />
				<u-cell-group title-bg-color="rgb(85, 85, 255)">
					<u-cell :titleStyle="{ fontWeight: 500 }" :title="item.title" v-for="(item, index) in list" :key="index"
						isLink :icon="item.iconUrl" @click="showToast(item)">
					</u-cell>
				</u-cell-group>
			</view>
		</view>
		<!-- 用户信息 -->
		<view class="mybody">
			<view class="userMsg" v-for="(item, index) in userList.records">
				
				<view @click="click(item)">
					<view class="top">
						<view class="userimg">
							<image :src="`https://dogji.vip${item.avatarPath}`" mode=""></image>
						</view>
						<view class="usertxt">
							<view class="userName">
								{{ item.name }}
								<!-- <view class="uuid">编号：{{item.uuid}}</view> -->
							</view>
							<view class="userVip" style="color: orangered;">
							</view>
							<view class="text">
								性别
								<span>{{ item.gender ? '男' : '女' }}</span>
							</view>
							<view class="text">
								年龄
								<span>{{ item.age }}</span>
							</view>
							<view class="text">
								身高
								<span>{{ item.height }}cm</span>
							</view>
							<!-- <view class="text">
								体重
								<span>{{ item.weight }}kg</span>
							</view> -->
							<view class="text">
								婚姻状况
								<span>{{ marry_status[item.isDivorced] }}</span>
							</view>
							<view class="text">
								学历
								<span>{{ item.education }}</span>
							</view>
							<view class="text">
								收入
								<span>{{ item.income }}w</span>
							</view>
						</view>
					</view>
					<view class="bottom">
						<image src="../../static/img/heart.png" mode=""></image>
						<span>{{ item.personality }}</span>
					</view>
				</view>
			</view>
			<!-- 加载更多提示 -->
			<view class='no_more_data'>没有更多内容了</view>
			<!-- 跳转登录提示 -->
			<u-modal :show="isshow" :content='content' @confirm="confirms" ref="uModal" :asyncClose="true"></u-modal>
		</view>
	</view>
</template>

<script>
let {
	findMsg
} = require('../../network/home.js')
import { marry_status,only_child } from '../../constant/enum'
export default {
	data() {
		return {
			autoplay: true,
			interval: 3000,
			duration: 500,
			userList: [],
			
			
			selectValue: '', //搜索参数
			gender: null, //性别选择
			startAge: null, //开始年龄
			endAge: null, //结束年龄
			// 下拉刷新、下拉加载参数
			pageNum: 1,
			total: 0,
			pageSize:10 ,
			// 按年龄选择
			show: false,
			isshow: false, //跳转登录
			content: '请先登录！',
			columns: [
				['起始年龄', 20, 25, 30, 35, 40, 45],
				['结束年龄', 25, 30, 35, 40, 45, 50]
			],
			columnData: [
				['结束年龄', 20, 25, 30, 35, 40, 45],
				['结束年龄', 25, 30, 35, 40, 45, 50],
				['结束年龄', 30, 35, 40, 45, 50],
				['结束年龄', 35, 40, 45, 50],
				['结束年龄', 40, 45, 50],
				['结束年龄', 45, 50],
				['结束年龄', 50],
			],
			marry_status,
			list: [{
				type: 'default',
				title: '选择年龄',
				iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'
			}]
		}
	},
	onLoad() {
		this.findList()
	},
	methods: {
		// 点击跳转填写详细信息
		click(item) {

			// let token = uni.getStorageSync("_token")
			uni.navigateTo({
				url: '../../subpackkage/index/personmsg?msg=' + JSON.stringify(item)
			})
			// if (token) {
			// 	// 页面跳转
			// 	uni.navigateTo({
			// 		url: '../../subpackkage/index/personmsg?msg=' + JSON.stringify(item)
			// 	})
			// } else {
			// 	this.isshow = true
			// }
		},
		//跳转登录事件
		confirms() {
			this.isshow = false
			uni.switchTab({
				url: "/pages/my/my"
			})
		},
		// 年龄搜索框事件
		changeHandler(e) {
			const {
				columnIndex,
				value,
				values, // values为当前变化列的数组内容
				index,
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.uPicker
			} = e
			// 当第一列值发生变化时，变化第二列(后一列)对应的选项
			if (columnIndex === 0) {
				// picker为选择器this实例，变化第二列对应的选项
				picker.setColumnValues(1, this.columnData[index])
			}
		},
		// 回调参数为包含columnIndex、value、values
		confirm(e) {
			this.startAge = e.value[0] == '起始年龄' ? '' : e.value[0]
			this.endAge = e.value[1] == '结束年龄' ? '' : e.value[1]
			this.show = false
		},
		// 取消按钮
		cancel() {
			this.show = false
		},
		// 展示选择年龄列表
		showToast() {
			this.show = true
		},
		// 查询
		async findList() {
			let isDivorced = this.selectValue
			let gender = this.gender
			let startAge = this.startAge
			let endAge = this.endAge
			let data = {
				pageNum:this.pageNum,
				pageSize:this.pageSize,
				param:{
					gender,
					isDivorced,
					startAge,
					endAge
				}
			}
			let res = await findMsg({...data})
			console.log(res.data)
			this.userList = res.data
			console.log(this.userList,"*************");
			this.total = this.userList.length
			
		},
		// 查询男性
		findBoy() {
			this.gender = this.gender == null ? '1' : null
			console.log('11', this.gender);
			this.findList()
			this.gender = null
		},
		// 查询女性
		findGirl() {
			this.gender = this.gender == null ? '0' : null
			this.findList()
			this.gender = null
		},
	},
	watch: {
		"gender"() {
			this.findList()
		},
		"startAge"() {
			this.findList()
		},
		"endAg"() {
			this.findList()
		}
	},
	onReady() { },

	//下拉刷新
	onPullDownRefresh() {
		//重置一下数据
		this.gender = null
		this.startAge = null
		this.endAge = null
		this.selectValue = ''
		this.pageNum = 1
		this.total = 0
		this.userList = []
		//重新发起请求
		this.findList(() => uni.stopPullDownRefresh())
	},
	//上拉触底
	onReachBottom() {
		if (this.pageNum * this.pageSize < this.total) {
			this.pageNum += 1
			this.findList() //调用函数
		}

	},
}
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}

.content {
	background-color: #e6e6e6;
}

/* 轮播图 */
.uni-margin-wrap {
	width: 690rpx;
	width: 100%;
}

.swiper {
	height: 300rpx;
}

.swiper-item {
	display: block;
	height: 300rpx;
	line-height: 300rpx;
	text-align: center;
}

image {
	width: 100%;
	height: 100%;
}

/* 按钮样式 */
.btn {
	margin: 20rpx;
	border-radius: 20rpx;
	display: grid;
	grid-template-columns: 27% 27% 46%;
	background-color: #fffaf8;
	height: 100%;
}

.btn button img {
	width: 60rpx;
	height: 60rpx;
}

.mini-btn {
	width: 140rpx;
	height: 60rpx;
	margin-top: 20rpx;
}

.button-cicle {
	width: 180rpx;
	height: 50rpx;
	display: flex;
	margin-top: 23rpx;
	line-height: 50rpx;
	justify-content: center;
	border-radius: 25px;
	/* 这里可以改成渐变： background:linear-gradient(to right, #ff55ff,#ffaaff) */
	background: linear-gradient(to right, #ff5a4b, #ff8bf4);
	font-size: 28rpx;
}

.mini-btn:hover {
	background-color: #ff8aa5;
	color: #fff;
	border: none;
}

.select {
	border-radius: 20rpx;
	background-color: #f4f4f4;
}
.no_more_data{
	font-style: 12px;
	colo: #ccc;
	text-align: center;
}
.mybody {
	min-height: 100vh;

	.userMsg {
		height: 100%;
		padding: 20rpx;
		margin: 30rpx 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20rpx #ffaaff;


		.top {
			display: flex;

			.userimg {
				image {
					width: 210rpx;
					height: 210rpx;
					border-radius: 10rpx;
				}
			}

			.usertxt {
				margin-left: 30rpx;
				flex: 1;
				display: grid;
				grid-template-columns: 50% 50%;
				grid-template-rows: 31% 23% 23% 23%;

				.userName {
					display: flex;
					justify-content: center;
					width: 100%;
					font-size: 18px;
					font-weight: 700;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					// .uuid{
					// 	font-size: 14px;
					// 	font-weight: 500;
					// }
				}
				.userVip{
					width: auto;
				}

				.text {
					font-size: 13px;
					color: #6f6f6f;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					span {
						margin-left: 20rpx;
						color: black;
					}
				}
			}
		}

		.bottom {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			font-size: 13px;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			span {
				flex: 1;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
}
</style>
